const { HotModuleReplacementPlugin } = require('webpack');
const { merge } = require('webpack-merge');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackBar = require('webpackbar');

const common = require('./webpack.common.config');



const tsLoader = common.module.rules.find((r) => r.loader === 'ts-loader');
if (tsLoader) {
  tsLoader.options = {
    ...tsLoader.options,
    // getCustomTransformers: () => ({
    //   before: [ReactRefreshTypeScript()],
    // }),
    // transpileOnly: true,
  };
}

module.exports = merge(common, {
 
  mode: 'development',
  devtool: 'cheap-module-source-map',
  devServer: {
    headers: { 'Access-Control-Allow-Origin': '*' },
    allowedHosts: "all",
    hot:false,
    onBeforeSetupMiddleware: function (devServer) {
      // if (!devServer) {
      //   throw new Error('webpack-dev-server is not defined');
      // }

      devServer.app.post('/upload', (_, res) => {
        res.send({
          code:Math.random()*10<5?200:-1,
          msg:'随机错误',
          data:'https://xinghuo.xfyun.cn/static/media/sparkdesk.34d76de5c2313b16ec3beacbe4269b9f.svg'
        });
      });
      
    },
    historyApiFallback: true,
    client: {
      overlay: false,
    },
    static: {
      directory: path.resolve(__dirname, '../public'),
    },
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    // new ReactRefreshWebpackPlugin(),
    // new HtmlWebpackPlugin({
    //   filename: path.resolve(__dirname, '../dist/index.html'),
    //   template: path.resolve(__dirname, `../public/index.html`),
    //   templateParameters: {
    //     entryPath: `/entry.js`,
    //   },
    //   inject: false, // @todo 'body',
    //   // templateContent: {}, // function() {}
    // }),
    // new CleanTerminalPlugin(),
    new WebpackBar(),
  ],
});
